<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Babulon</title>
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>

<body>
<!-- 导入依赖 -->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<!-- links to the latest version of the minified serializers -->
<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<canvas id="renderCanvas" touch-action="none"></canvas>
<script>
    // import * as BABYLON from 'babylonjs';
    // import 'babylonjs-loaders';
    var obj1, obj2;
    const canvas = document.getElementById("renderCanvas");
    const engine = new BABYLON.Engine(canvas, true);
    const initScene = () => {
        var scene = new BABYLON.Scene(engine);
        // 设置镜头位置
        var canvas = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 3000, BABYLON.Vector3.Zero(), scene);
        canvas.wheelPrecision = 0.3;
        canvas.attachControl(canvas, true);
        // 灯光
        var light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(-1, 1, 0), scene);
        light.emissiveColor = new BABYLON.Color3(1, 0, 0);

        // 天空盒大小size
        var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {
            size: 6000.0
        }, scene);
        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
        skyboxMaterial.backFaceCulling = false;
        // 天空盒地址，这里是网上资源，从浏览器是打不开这个地址的，只能通过项目获取
        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(
            "https://www.babylonjs-playground.com/textures/TropicalSunnyDay", scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skybox.material = skyboxMaterial;

        // // 场景
        // const scene = new BABYLON.Scene(engine);
        // scene.ambientColor = new BABYLON.Color3(1, 1, 1);
        // 相机
        const camera = new BABYLON.ArcRotateCamera(
            "Camera",
            Math.PI / 2,
            Math.PI / 2,
            30,
            new BABYLON.Vector3(20, 20, 20),
            scene
        );
        return {
            scene,
            light,
            canvas
        };
    };
    const createScene = (scene) => {


        /**导入模型写法2，做动画效果，每一帧向后移动1，起始位置为-1500*/
        BABYLON.SceneLoader.ImportMesh("", "./Jump/", "Jump Force Dai.duf_1_2_6.obj", scene, function (meshes) {

            for (let i = 0; i < meshes.length; i++) {
                console.log(meshes[i].name)
            }
            let combinedMesh = BABYLON.Mesh.MergeMeshes(meshes, true);
            console.log("合并mesh:",combinedMesh)
            // 导出mesh到GLB
            BABYLON.GLTF2Export.GLBAsync(scene, "comb", { shouldExportNode: (node) => node === combinedMesh })
                .then((glb) => {
                    glb.downloadFiles();
                });
        });



    }

    const initRender = (scene) => {
        engine.runRenderLoop(function () {
            scene.render();
        });
        window.addEventListener("resize", function () {
            engine.resize();
        });
    };

    (() => {
        const { scene } = initScene();
        createScene(scene);
        initRender(scene);
    })();
</script>
</body>

</html>